<template>
	<div class="storeContainer">
		<x-header :left-options="{showBack: false}" title="店铺管理员" class="header vux-1px-b">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
			<a slot="right" class="add" @click="jump()">添加管理员</a>
		</x-header>

		<div class="adminContainer">
			<ul class="admin_con">
				<li class="admin_msg" v-for="(item,index) in list">
					<router-link :to="'AdminDetail/admin_id/' + item.admin_id">
						<img :src="item.member.member_thumb" class="img" v-if="item.member!=null" />
						<span class="admin_net_name">{{item.shop_name}}<span class="icon-admin" v-if="item.admin_state!=='0'"></span></span>
						<span class="admin_name">姓名:{{item.shop_admin_id}}</span>
						<span class="mobile_number">手机号:4831768593</span>
					</router-link>
					<button class="btn" @click="audit()" v-if="item.admin_state!='0'">审核</button>
					<button class="btn remove" @click="removeAdmin(index,item.admin_id)" v-else>删除</button>
				</li>
			</ul>
		</div>
		<x-dialog v-model="isShow" :hide-on-blur="true" :dialog-style="{height:'300px'}">
			<a slot><img id="imgSrc" :src="qrcode" alt="" /></a>
			<p>扫描二维码添加管理员</p>
			<!--<img src="../assets/images/home/icon_refresh.png" alt="" class="refresh" />-->
		</x-dialog>
		<confirm v-model="tkShow" @on-confirm="delAdmin()" title="弹窗提示" :hide-on-blur="true">
			<a slot class="del_content">确定删除此管理员吗？</a>
		</confirm>
		<toast v-model="tkShow2" v-if="code==1">
			{{msg}}
		</toast>
		<toast v-model="tkShow2" type="cancel" v-else>
			{{msg}}
		</toast>

	</div>
</template>

<script>
	import QRCode from 'qrcode'
	import { XHeader, Toast, XDialog, Confirm } from 'vux'
	export default {
		name: "storeAdmin",
		data() {
			return {
				list: [],
				del: [],
				isShow: false,
				tkShow: false,
				tkShow2: false,
				index: '',
				admin_id: '',
				msg: '',
				code: '',
				qrcode: '',
				urls: ''
			}
		},
		components: {
			XHeader,
			Toast,
			XDialog,
			QRCode,
			Confirm
		},
		created() {
			this.getData();
		},
		methods: {
			jump() {
				this.isShow = !this.isShow;
				this.$http({
					method: 'POST',
					url: '/los/api/seller/admin_invite.json'
				}).then((response) => {
					console.log(response.data.url);
					this.qrcode = response.data.url;
				}).catch((err) => {
					console.log("error");
				})
			},
			getData() {
				this.$http({
					method: 'GET',
					url: '/los/api/seller/admin_list.json'
				}).then((response) => {
					this.list = response.data.data;
				}).catch((err) => {
					console.log("error");
				})
			},
			//删除
			//将从后台获取的admin_id赋值给当前admin_id，执行后续的删除管理员的操作
			removeAdmin(index, id) {
				this.admin_id = id;
				this.index = index;
				console.log(this.admin_id, this.index);
				this.tkShow = !this.tkShow;

			},
			//确认删除管理员
			delAdmin() {
				//向后台数据传递admin_id参数
				var id = {
					admin_id: this.id
				}
				this.$http({ //调用接口
					method: 'POST',
					url: '/los/api/seller/admin_del.json',
					data: id
				}).then((res) => {
					//当后台数据code状态值为1时，实现删除，将后台数据msg的值赋值给当前msg用于显示
					//为0的时候，操作失败
					if(res.data.code == 1) {
						this.code = res.data.code;
						//					console.log(this.del);
						this.tkShow2 = !this.tkShow2;
						this.list.splice(index, 1);
						this.msg = res.data.msg;
					} else {
						this.msg = res.data.msg;
						this.tkShow2 = !this.tkShow2;
						console.log("erro");
					}
				}).catch((err) => {
					console.log("errors");
				})
			},
			//跳转到adminMsg页面
			//			audit() {
			//				this.$router.push({
			//					path: '/adminMsg',
			//					query: {
			//						name: this.list.admin_id
			//					}
			//				});
			//			},
			back: function() {
				window.history.go(-1);
			},
		}
	}
</script>

<style scoped lang='less'>
	.header {
		background: #fff;
	}
	/*管理员容器*/
	
	.storeContainer {
		/*position: relative;*/
		width: 100%;
		height: 100%;
		/*店铺管理员信息*/
		.adminContainer {
			background: #fff;
			.admin_con {
				position: relative;
				.admin_msg {
					position: relative;
					height: 2.13rem;
					font-size: 0;
					.img {
						width: 1.33rem;
						height: 1.33rem;
						border-radius: 8px;
						background-color: #ff9f9f;
						display: inline-block;
						position: absolute;
						left: 0.26rem;
						top: 0.4rem;
					}
					.admin_net_name {
						font-size: 0.4rem;
						color: #333333;
						position: absolute;
						left: 1.86rem;
						display: inline-block;
						top: 0.53rem;
						position: relative;
						.icon-admin {
							display: inline-block;
							width: 0.4rem;
							height: 0.4rem;
							position: absolute;
							/*top: 50%;
						margin-top: -0.2rem;*/
							bottom: 0;
							margin-left: 0.26rem;
							/*background-image: url(../assets/timg/admin.png);*/
							background-repeat: no-repeat;
							background-size: 100%;
						}
					}
					.admin_name {
						font-size: 0.32rem;
						color: #777777;
						position: absolute;
						left: 1.86rem;
						bottom: 0.43rem;
					}
					.mobile_number {
						font-size: 0.32rem;
						color: #777777;
						position: absolute;
						left: 3.85rem;
						bottom: 0.43rem;
					}
					.btn {
						width: 1.46rem;
						height: 0.58rem;
						color: #ffffff;
						font-size: 0.32rem;
						background: #66ccff;
						position: absolute;
						right: 0.4rem;
						line-height: 0.58rem;
						top: 50%;
						margin-top: -0.29rem;
						border-radius: 0.29rem;
						border: none;
						outline: none;
					}
					.btn:after {
						position: absolute;
						left: 0;
						bottom: 0;
						width: 200%;
						height: 1px;
						border-bottom: 1px solid #f3f3f3;
						transform-origin: 0 0;
						transform: scaleX(0.5);
					}
					.remove {
						color: #777777;
						background: white;
						border: 1px solid #aaaaaa;
					}
				}
				/*管理员列表追加边线样式（细线）*/
				.admin_msg:after {
					content: " ";
					position: absolute;
					left: 0;
					bottom: 0;
					width: 200%;
					height: 1px;
					border-bottom: 1px solid #f3f3f3;
					transform-origin: 0 0;
					transform: scaleX(0.5);
				}
			}
		}
		.refresh {
			float: right;
		}
		#imgSrc {
			margin-top: 0.66rem;
			width: 4rem;
			height: 4rem;
		}
		.del_content {
			color: gray;
			font-size: 0.35rem;
		}
	}
</style>